<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fa{
            width: 55px;
            height: 55px;
            background-color: #ff6700;
            overflow: hidden;
        }
        .fb{
            width: 110px;
            height: 55px;
            transition: all 0.5s;
        }
        .fb:before,.fb:after{
            width: 55px;
            height: 55px;
            display: inline-block;
            content: "";
            background-image: url("http://s02.mifile.cn/assets/static/image/mi-logo.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
        .fb:after{
            background-image: url("https://s02.mifile.cn/assets/static/image/mi-home.png");
        }
        .fa:hover .fb{
            transform: translateX(-55px);
        }

    </style>
</head>
<body>
<div class="fa">
    <div class="fb"></div>
</div>
</body>
</html>